<template>
  <div class="login">
    <div class="login-box">
      <el-form :model="user" label-width="120px" :rules="rules" ref="loginRef">
        <el-form-item label="用户名" prop="adminname">
          <el-input v-model="user.adminname" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="user.password" show-password />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleLoginAction">登录</el-button>
          <div class="jizhumima">
            <el-checkbox v-model="checked">记住密码</el-checkbox>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import router from '../../router'
import { ElMessage } from 'element-plus'
import { login } from '@/api/login'
// import ElMessage from 'element-plus/es/components/message'
const loginRef = ref(null)
const checked = ref()
const user = ref({
  adminname: '',
  password: '',
})
onMounted(() => {
  if (sessionStorage.checked) {
    checked.value = true
    user.value.adminname = sessionStorage.getItem('adminname')
    user.value.password = sessionStorage.getItem('password')
  } else {
    sessionStorage.removeItem('adminname')
    sessionStorage.removeItem('password')
    sessionStorage.removeItem('checked')
  }
})
// const handelChange = () => {
//   if (checked.value) {
//     sessionStorage.setItem('adminname', user.value.adminname)
//     sessionStorage.setItem('password', user.value.password)
//     sessionStorage.setItem('checked', checked.value)
//   } else {
//     sessionStorage.removeItem('adminname')
//     sessionStorage.removeItem('password')
//     sessionStorage.removeItem('checked')
//   }
// }
console.log(sessionStorage.getItem('adminname'))
const handleLoginAction = async () => {
  // 表单校验
  console.log(loginRef)

  const result = await loginRef.value?.validate()
  console.log('表单校验:', result)
  if (result) {
    const { status, token, message } = await login(user)
    if (status == 200) {
      if (checked.value) {
        sessionStorage.setItem('adminname', user.value.adminname)
        sessionStorage.setItem('password', user.value.password)
        sessionStorage.setItem('checked', checked.value)
      } else {
        sessionStorage.removeItem('adminname')
        sessionStorage.removeItem('password')
        sessionStorage.removeItem('checked')
      }
      console.log('登录成功:', token, message)
      // 将登录成功的 token 保存到本地
      sessionStorage.token = token
      // 跳转到主页面
      router.push('/dashboard')
    } else {
      ElMessage.error('登录失败:' + message)
    }
  }
}

const rules = {
  adminname: [{ required: true, message: '用户名必填!' }],
  password: [{ required: true, message: '密码必填!' }],
}
</script>

<style lang="scss" scoped>
$login-box-width: 300px;

.login {
  width: 100%;
  height: 100vh;
  display: flex;
  background: url('../../img/login.png') no-repeat;
  background-size: 100% 100%;

  .login-box {
    width: $login-box-width;
    height: 200px;
    margin: auto;
  }
}
.jizhumima {
  margin-left: 20px;
}
</style>
